*{margin:0;padding:0;box-sizing:border-box}:root{--color-red: #FF6B9D;--color-blue: #6B8EFF;--color-yellow: #FFD93D;--color-green: #6BFFB8;--color-bg: #0B0520;--color-card: rgba(25, 15, 50, .7);--color-text: #F0E6FF;--color-text-dim: #B8A3D9;--gradient-1: linear-gradient(135deg, #9D50BB 0%, #6E48AA 100%);--gradient-2: linear-gradient(135deg, #A044FF 0%, #6A00F4 100%);--gradient-3: linear-gradient(135deg, #FA709A 0%, #FEE140 100%);--gradient-cosmic: linear-gradient(180deg, #0B0520 0%, #1a0f3e 50%, #2a1854 100%);--glow-purple: 0 0 20px rgba(157, 80, 187, .5);--glow-gold: 0 0 15px rgba(255, 215, 0, .4)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--color-bg);background-image:url(https://image.cdn2.seaart.me/2026-01-06/d5e8o9le878c73cso5qg/cb075632605caaf742b538204e123d6f.webp);background-size:cover;background-position:center;background-attachment:fixed;color:var(--color-text);min-height:100vh;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;inset:0;background:var(--gradient-cosmic);opacity:.85;z-index:0;pointer-events:none}#app{min-height:100vh;position:relative}.bg-animation{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;pointer-events:none}.bg-circle{position:absolute;border-radius:50%;opacity:.15;filter:blur(2px);animation:float 25s infinite ease-in-out}.bg-circle:nth-child(1){width:400px;height:400px;background:radial-gradient(circle,rgba(157,80,187,.4) 0%,transparent 70%);top:5%;left:5%;animation-delay:0s}.bg-circle:nth-child(2){width:300px;height:300px;background:radial-gradient(circle,rgba(107,142,255,.3) 0%,transparent 70%);top:50%;right:5%;animation-delay:7s}.bg-circle:nth-child(3){width:350px;height:350px;background:radial-gradient(circle,rgba(255,217,61,.25) 0%,transparent 70%);bottom:5%;left:25%;animation-delay:14s}.bg-circle:nth-child(4){width:250px;height:250px;background:radial-gradient(circle,rgba(107,255,184,.3) 0%,transparent 70%);top:25%;right:25%;animation-delay:21s}.bg-animation:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20% 30%,white,transparent),radial-gradient(2px 2px at 60% 70%,white,transparent),radial-gradient(1px 1px at 50% 50%,white,transparent),radial-gradient(1px 1px at 80% 10%,white,transparent),radial-gradient(2px 2px at 90% 60%,white,transparent),radial-gradient(1px 1px at 33% 90%,white,transparent),radial-gradient(1px 1px at 15% 80%,white,transparent);background-size:200% 200%;animation:starTwinkle 8s infinite}@keyframes starTwinkle{0%,to{opacity:.5}50%{opacity:1}}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}.container{max-width:1000px;margin:0 auto;padding:20px;position:relative;z-index:2}.container,.welcome-screen,.result-screen{animation:pageEnter .6s cubic-bezier(.4,0,.2,1) backwards}@keyframes pageEnter{0%{opacity:0;transform:scale(.95) translateY(20px);filter:blur(10px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}.welcome-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px}.welcome-title{font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,#a044ff,#ffd93d,#6bffb8);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;animation:fadeInUp .8s ease-out,titleGradientShift 6s ease infinite,titleFloat 3s ease-in-out infinite;position:relative;filter:drop-shadow(0 0 15px rgba(160,68,255,.4))}@keyframes titleGradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.welcome-title:before{content:"✦";position:absolute;left:-60px;top:50%;transform:translateY(-50%);font-size:2rem;color:#ffd93d;animation:spin 20s linear infinite}.welcome-title:after{content:"✦";position:absolute;right:-60px;top:50%;transform:translateY(-50%);font-size:2rem;color:#ffd93d;animation:spin 20s linear infinite reverse}@keyframes titleGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}@keyframes spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.welcome-subtitle{font-size:1.3rem;color:var(--color-text-dim);margin-bottom:40px;animation:fadeInUp .8s ease-out .2s backwards}.welcome-description{max-width:600px;font-size:1.1rem;line-height:1.8;color:var(--color-text);margin-bottom:50px;animation:fadeInUp .8s ease-out .4s backwards}.color-badges{display:flex;gap:20px;margin-bottom:50px;flex-wrap:wrap;justify-content:center;animation:fadeInUp .8s ease-out .6s backwards}.color-badge{padding:12px 24px;border-radius:25px;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .3s ease;backdrop-filter:blur(10px);position:relative;overflow:hidden}.color-badge:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.color-badge:hover:before{width:300px;height:300px}.color-badge:hover{transform:translateY(-5px) scale(1.05);box-shadow:var(--glow-purple)}.color-badge.red{background:#e74c3c33;color:var(--color-red);border:2px solid var(--color-red)}.color-badge.blue{background:#3498db33;color:var(--color-blue);border:2px solid var(--color-blue)}.color-badge.yellow{background:#f39c1233;color:var(--color-yellow);border:2px solid var(--color-yellow)}.color-badge.green{background:#27ae6033;color:var(--color-green);border:2px solid var(--color-green)}.start-button{padding:18px 60px;font-size:1.2rem;font-weight:700;border:none;border-radius:50px;background:var(--gradient-1);color:#fff;cursor:pointer;transition:all .3s ease;animation:fadeInUp .8s ease-out .8s backwards;box-shadow:0 10px 30px #9d50bb99,var(--glow-purple);position:relative;overflow:hidden}.start-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.start-button:hover:before{left:100%}.start-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 15px 40px #9d50bbcc,var(--glow-purple)}.start-button:active{transform:translateY(0) scale(.98)}.question-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:40px 20px;animation:fadeIn .5s ease-out}.progress-bar{width:100%;height:6px;background:var(--color-card);border-radius:10px;margin-bottom:40px;overflow:hidden}.progress-fill{height:100%;background:var(--gradient-1);transition:width .4s ease;border-radius:10px}.question-number{text-align:center;color:var(--color-text-dim);font-size:1rem;margin-bottom:10px}.question-card{background:var(--color-card);border-radius:20px;padding:40px 50px;margin-bottom:40px;box-shadow:0 10px 40px #00000080,0 0 30px #9d50bb4d;animation:slideInUp .5s ease-out;backdrop-filter:blur(15px);border:1px solid rgba(160,68,255,.3);position:relative}.question-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#a044ff,#ffd93d,#6bffb8,#6b8eff);border-radius:20px;z-index:-1;opacity:0;transition:opacity .3s;filter:blur(10px)}.question-card:hover:before{opacity:.3}.question-text{font-size:1.8rem;font-weight:600;text-align:center;margin-bottom:40px;line-height:1.6;color:var(--color-text)}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.option{position:relative;min-height:150px;cursor:pointer;transform-style:preserve-3d;perspective:1000px;transition:all .6s cubic-bezier(.4,0,.2,1);animation:cardSlideIn .6s cubic-bezier(.4,0,.2,1) backwards}.option:nth-child(1){animation-delay:.1s}.option:nth-child(2){animation-delay:.2s}.option:nth-child(3){animation-delay:.3s}.option:nth-child(4){animation-delay:.4s}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(50px) rotateX(-20deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}.option-card{position:relative;width:100%;height:100%;min-height:150px;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.4,0,.2,1)}.option:hover .option-card{transform:translateY(-3px)}.option-card-front{position:relative;width:100%;height:100%;padding:25px;background:linear-gradient(135deg,#190f32e6,#2d1946cc);border:2px solid rgba(160,68,255,.3);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center;overflow:hidden;backdrop-filter:blur(15px);box-shadow:0 10px 30px #00000080,inset 0 1px #ffffff1a;transition:all .4s cubic-bezier(.4,0,.2,1)}.option-card-front:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);transform:rotate(45deg);transition:all .6s;pointer-events:none}.option:hover .option-card-front:before{left:100%}.option-card-front:after{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;background:linear-gradient(135deg,#a044ff,#ffd93d,#6bffb8,#6b8eff,#a044ff);background-size:400% 400%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;animation:borderRotate 4s linear infinite;z-index:-1}@keyframes borderRotate{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.option:hover .option-card-front:after{opacity:1}.option-card-front .card-particles{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;pointer-events:none}.option-card-front .card-particles:before,.option-card-front .card-particles:after{content:"✦";position:absolute;font-size:1.2rem;color:#ffd70066;animation:floatParticle 3s infinite ease-in-out}.option-card-front .card-particles:before{top:20%;left:10%;animation-delay:0s}.option-card-front .card-particles:after{bottom:20%;right:10%;animation-delay:1.5s}@keyframes floatParticle{0%,to{transform:translateY(0) rotate(0);opacity:.2}50%{transform:translateY(-15px) rotate(180deg);opacity:.6}}.option:hover .option-card-front{border-color:#a044ff99;box-shadow:0 15px 40px #0009,0 0 30px #a044ff80,inset 0 1px #fff3}.option.selected .option-card-front{background:linear-gradient(135deg,#a044ff80,#667eea66);border-color:#a044ff;box-shadow:0 20px 50px #000000b3,0 0 40px #a044ffe6,inset 0 0 30px #a044ff66;transform:scale(1.05)}.option.selected .option-card-front:after{opacity:1;animation:borderRotate 3s linear infinite}.option.selected .option-card-front:before{animation:sparkleSweep .8s ease-out}@keyframes sparkleSweep{0%{left:-50%;opacity:0}50%{opacity:1}to{left:150%;opacity:0}}.option.selected .option-card{animation:none}.option,.option-card-front{overflow:visible}@keyframes clickRipple{0%{box-shadow:0 20px 50px #000000b3,0 0 #a044ffb3,inset 0 0 30px #a044ff66}50%{box-shadow:0 20px 50px #000000b3,0 0 0 20px #a044ff00,inset 0 0 30px #a044ff66}to{box-shadow:0 20px 50px #000000b3,0 0 40px #a044ffe6,inset 0 0 30px #a044ff66}}.option.selected .option-card-front{animation:clickRipple .6s ease-out}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 15px #a044ff99}50%{transform:scale(1.05);box-shadow:0 0 25px #a044ffcc}}.option-letter{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#a044ff99,#667eea99);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;flex-shrink:0;box-shadow:0 4px 15px #0000004d,inset 0 1px #ffffff4d;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;z-index:2}.option:hover .option-letter{transform:scale(1.1);box-shadow:0 6px 20px #0006,0 0 20px #a044ff99,inset 0 1px #fff6}.option.selected .option-letter{background:linear-gradient(135deg,#a044ff,#667eea);box-shadow:0 8px 25px #00000080,0 0 30px #a044ffe6,inset 0 1px #ffffff80;animation:letterGlow 2s ease-in-out infinite}@keyframes letterGlow{0%,to{transform:scale(1);box-shadow:0 8px 25px #00000080,0 0 30px #a044ffe6,inset 0 1px #ffffff80}50%{transform:scale(1.08);box-shadow:0 10px 30px #0009,0 0 40px #a044ff,inset 0 1px #fff9}}.option-text{font-size:1.05rem;line-height:1.6;color:var(--color-text);position:relative;z-index:2;font-weight:500}.nav-buttons{display:flex;gap:20px;justify-content:center;margin-top:20px;opacity:.6;transition:opacity .3s ease}.nav-buttons:hover{opacity:1}.nav-button{padding:12px 35px;font-size:1rem;font-weight:600;border:2px solid rgba(255,255,255,.15);border-radius:50px;background:transparent;color:var(--color-text-dim);cursor:pointer;transition:all .3s ease}.nav-button:hover:not(:disabled){background:#ffffff14;border-color:#ffffff4d;color:var(--color-text)}.nav-button:disabled{opacity:.2;cursor:not-allowed}.nav-button.primary{background:#a044ff26;border-color:#a044ff4d;color:var(--color-text)}.nav-button.primary:hover:not(:disabled){background:#a044ff40;border-color:#a044ff80;box-shadow:0 3px 15px #a044ff4d}.result-screen{min-height:100vh;padding:40px 20px 60px;animation:fadeIn .5s ease-out}.result-header{text-align:center;margin-bottom:50px}.result-title{font-size:2.8rem;font-weight:800;margin-bottom:15px;background:var(--gradient-2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.result-subtitle{font-size:1.2rem;color:var(--color-text-dim);line-height:1.5}.personality-type{background:var(--color-card);border-radius:25px;padding:40px;margin-bottom:40px;text-align:center;box-shadow:0 10px 40px #0000004d}.personality-label{font-size:1.1rem;color:var(--color-text-dim);margin-bottom:15px}.personality-name{font-size:3rem;font-weight:800;margin-bottom:10px}.personality-description{font-size:1.2rem;color:var(--color-text-dim);line-height:1.6}.chart-container{background:var(--color-card);border-radius:25px;padding:40px;margin-bottom:40px;box-shadow:0 10px 40px #0000004d}.chart-title{font-size:1.5rem;font-weight:700;margin-bottom:30px;text-align:center}.radar-chart{width:100%;max-width:600px;height:auto;margin:0 auto 30px;position:relative;display:flex;justify-content:center}.radar-chart canvas{max-width:100%;height:auto}.color-bars{display:flex;flex-direction:column;gap:20px}.color-bar{display:flex;align-items:center;gap:15px}.color-bar-label{width:80px;font-weight:600;flex-shrink:0}.color-bar-track{flex:1;height:30px;background:#ffffff0d;border-radius:15px;overflow:hidden;position:relative}.color-bar-fill{height:100%;border-radius:15px;transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.color-bar-fill:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.color-bar-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.color-bar-value{width:50px;text-align:right;font-weight:700;font-size:1.1rem}.color-bar-fill.red{background:var(--color-red)}.color-bar-label.red{color:var(--color-red)}.color-bar-fill.blue{background:var(--color-blue)}.color-bar-label.blue{color:var(--color-blue)}.color-bar-fill.yellow{background:var(--color-yellow)}.color-bar-label.yellow{color:var(--color-yellow)}.color-bar-fill.green{background:var(--color-green)}.color-bar-label.green{color:var(--color-green)}.traits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;margin-bottom:40px;max-width:900px;margin-left:auto;margin-right:auto}.trait-card{background:var(--color-card);border-radius:15px;padding:30px;box-shadow:0 5px 20px #0000004d,var(--glow-purple);border-left:4px solid;transition:all .4s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(10px);border:1px solid rgba(160,68,255,.2);position:relative;overflow:hidden;transform-style:preserve-3d;animation:cardFadeIn .6s ease-out backwards}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(30px) rotateX(-15deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}.trait-card:nth-child(1){animation-delay:.1s}.trait-card:nth-child(2){animation-delay:.2s}.trait-card:nth-child(3){animation-delay:.3s}.trait-card:nth-child(4){animation-delay:.4s}.trait-card:before{content:"✦";position:absolute;top:15px;right:15px;font-size:1.5rem;opacity:.2;transition:all .4s cubic-bezier(.4,0,.2,1)}.trait-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 15px 40px #00000080,0 0 30px #9d50bb99;border-color:#a044ff99}.trait-card:hover:before{opacity:.8;transform:rotate(180deg) scale(1.3);text-shadow:0 0 10px rgba(160,68,255,.8)}.trait-card.red{border-left-color:var(--color-red)}.trait-card.blue{border-left-color:var(--color-blue)}.trait-card.yellow{border-left-color:var(--color-yellow)}.trait-card.green{border-left-color:var(--color-green)}.trait-title{font-size:1.4rem;font-weight:700;margin-bottom:12px;line-height:1.3}.trait-description{color:var(--color-text-dim);line-height:1.7;font-size:1rem}.action-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.action-button{padding:15px 35px;font-size:1.1rem;font-weight:600;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:10px}.action-button.primary{background:var(--gradient-1);color:#fff;box-shadow:0 5px 20px #667eea66}.action-button.primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea99}.action-button.secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3)}.action-button.secondary:hover{background:#ffffff1a;border-color:#ffffff80}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.container{padding:15px}.welcome-title{font-size:2.5rem}.welcome-subtitle{font-size:1.1rem}.welcome-description{font-size:1rem}.color-badges{gap:10px}.color-badge{padding:8px 16px;font-size:.9rem}.question-card{padding:25px 20px}.question-text{font-size:1.3rem;margin-bottom:30px}.options{grid-template-columns:1fr;gap:15px}.option{min-height:130px}.option-card-front{padding:20px}.option-letter{width:45px;height:45px;font-size:1.2rem}.option-text{font-size:.95rem}.result-screen{padding:30px 15px 50px}.result-title{font-size:2rem}.result-subtitle{font-size:1rem}.personality-type{padding:30px 20px}.personality-name{font-size:2rem}.personality-description{font-size:1rem}.radar-chart{max-width:100%;height:auto}.radar-chart canvas{width:100%!important;height:auto!important}.chart-container{padding:25px 15px}.trait-card{padding:25px 20px}.trait-title{font-size:1.2rem}.trait-description{font-size:.95rem}.traits-grid{grid-template-columns:1fr;gap:20px}.action-buttons{flex-direction:column}.action-button{width:100%;justify-content:center}.nav-button{padding:12px 30px;font-size:1rem}}